<template>
  <div>
    <a-modal
      :title="modalTitle"
      width="1000px"
      v-model:visible="visible"
      cancelText="取消"
      @ok="handleOk"
    >
      <a-form
        :model="formState"
        name="classForm"
        ref="formRef"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
      >
        <a-form-item
          label="name"
          name="name"
          :rules="[{ required: true, message: '请输入审核名称' }]"
        >
          <a-input
            allowClear
            placeholder="请输入审核名称"
            v-model:value="formState.name"
          ></a-input>
        </a-form-item>
        <a-form-item label="游戏图标">
          <a-upload
            v-model:fileList="formState.icons"
            list-type="picture-card"
            :max-count="1"
          >
            <div v-if="formState.icons.length < 1">
              <PlusOutlined
                :style="{
                  fontSize: '32px',
                  color: 'rgba(222, 222, 222, 1)',
                }"
              />
              <div class="margintop18">点击或拖拽上传</div>
            </div>
          </a-upload>
          <i class="fr"
            >① 请您上传1张300×300像素，200KB以内的PNG格式直角图标。<br />②
            上传成功后平台将对图片进行统一规范化处理。</i
          >
        </a-form-item>
        <!-- <a-form-item
          label="age"
          name="age"
          :rules="[{ required: true, message: '请输入审核名称' }]"
        >
          <a-input
            allowClear
            placeholder="请输入审核名称"
            v-model:value="formState.age"
          ></a-input>
        </a-form-item> -->
        <!-- <a-form-item
          label="address"
          name="address"
          :rules="[{ required: true, message: '请输入审核名称' }]"
        >
          <a-input
            allowClear
            placeholder="请输入审核名称"
            v-model:value="formState.address"
          ></a-input>
        </a-form-item> -->
        <!-- <a-form-item
          label="类型"
          name="status"
          :rules="[
            { required: true, message: '请选择审核状态', trigger: 'blur' },
          ]"
        >
          <a-select
            allowClear
            show-search
            :options="[
              { label: '通过', value: '1' },
              { label: '审核失败', value: '2' },
              { label: '已撤回', value: '3' },
              { label: '审核中', value: '4' },
            ]"
            placeholder="请输入审核状态"
            v-model:value="formState.status"
          ></a-select>
        </a-form-item> -->
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { reactive, ref, nextTick, computed, toRaw } from 'vue'

const ModalOpenType = {
  ADD: 'add',
  EDIT: 'edit',
}
const visible = ref(false)
const formRef = ref(null)

const operationName = ref('')
const props = defineProps(['name'])
const modalTitle = computed(() => operationName.value + props.name)

const resetForm = () => {
  formRef.value.clearValidate()
  formRef.value.resetFields()
}
const open = (type, id) => {
  visible.value = true
  nextTick(async () => {
    resetForm()
    console.log(props)
    if (type === ModalOpenType.EDIT) {
      operationName.value = '编辑'
      const rowData = await id
      replaceFormFieldsValues(rowData)
    } else {
      operationName.value = '新增'
    }
  })
}

// const getRowById = id => {
//   return new Promise((resolve, reject) => {
//     setTimeout(() => {
//       resolve({
//         schoolId: 2,
//         courseName: 'qwe',
//         id: '1',
//       })
//     }, 300)
//   })
// }

const formState = reactive({
  status: null,
  id: '',
  icons: [],
  name: '',
  age: '',
  address: '',
})

const replaceFormFieldsValues = data => {
  Object.keys(data).forEach(key => {
    formState[key] = data[key]
  })
}
const handleOk = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log('values', formState, toRaw(formState))
      console.log('operationName.value', operationName.value)
      if (operationName.value == '编辑') {
        console.log(111, '222')
      } else {
        console.log(222, '222')
      }
      visible.value = false
    })
    .catch(error => {
      console.log('error', error)
    })
}

defineExpose({
  open,
})
</script>

<style lang="" scoped></style>
